<template>
  <view :class="['page-wrap', theme]" :style="[customWrapStyle]">
    <!-- #ifdef MP-WEIXIN -->
    <view class="nav-wrap" v-if="!hideNav">
      <view
        class="nav-bar"
        :style="
          'height:' + height + 'px;background:' + background + ';color:' + color
        "
      >
        <view
          class="nav-content"
          :class="{ left: navLeft }"
          :style="
            'margin-top:' +
            topHeight +
            'px;' +
            'height:' +
            (height - topHeight) +
            'px;' +
            'padding-left:' +
            (navLeft ? navLeftPaddingLeft : 0) +
            'px'
          "
        >
          <template v-if="back">
            <text
              :class="['nav-back', { dark: dark }]"
              v-if="pagesLen >= 2"
              @click="handleBack"
            ></text>
            <text
              :class="['nav-home', { dark: dark }]"
              v-else
              @click="handleHome"
            ></text>
          </template>
          <view class="nav-title">
            <slot name="title">
              {{ title }}
            </slot>
          </view>
        </view>
      </view>
      <view
        class="nav-replace"
        :style="'height:' + height + 'px'"
        v-if="stayStill"
      ></view>
    </view>
    <!-- #endif -->
    <view
      class="content-wrap"
      :class="{ 'hide-pd': hideSafeArea }"
      :style="{ backgroundColor: contentWrapColor }"
    >
      <slot v-if="personId || !needLogin"></slot>
      <!-- <view class="no-login" v-else>
        温馨提示
        <view class="no-login-text">该功能需要您的登录信息，请登录后进行操作</view>
        <view class="no-login-btn">
          <u-button type="primary" hover-class="none" @click="handleLogin(previewId)">前往登录</u-button>
          <u-button :hair-line="false" :custom-style="customStyle" @click="handleHome" v-if="!previewId.mpaActivityId">回到首页</u-button>
        </view>
      </view> -->
      <u-image v-else width="100%" mode="widthFix" :src="defaultImg"></u-image>
    </view>
    <view class="tab-wrap" v-if="!hideTab && !isSinglePage">
      <view class="tab-bar">
        <view
          :class="
            'tab-bar-item' +
            (activeTab === item.name ? ' active' : '') +
            (isCompany ? ' company' : '')
          "
          v-for="(item, index) in tabBarList"
          :key="index"
          @click="handleTabBar(item)"
        >
          <image
            class="item-icon"
            :src="
              activeTab === item.name ? item.selectedIconPath : item.iconPath
            "
          ></image>
          <text class="item-title">{{ item.text }}</text>
          <u-badge
            v-if="item.cnt"
            type="error"
            :offset="isCompany ? [10, 39] : [10, 50]"
            :count="item.cnt"
          ></u-badge>
        </view>
      </view>
      <view class="tab-replace"></view>
    </view>
  </view>
</template>
<script>
import { getCompanyPersonAllRights } from "@/api/modules/company";

export default {
  props: {
    customWrapStyle: {
      type: Object,
      default: () => {},
    },
    previewId: {
      type: Object,
      default: () => {},
    },
    txtcolor: {
      type: String,
      default: "#ffffff",
    },
    darkTxtColor: {
      type: String,
      default: "#222222",
    },
    bgColor: {
      type: String,
      default: "#ffffff",
    },
    initBgColor: {
      type: String,
      default: "transparent",
    },
    title: String,
    showTop: {
      type: Boolean,
      default: true,
    },
    dark: {
      type: Boolean,
      default: true,
    },
    hideNav: Boolean,
    hideTab: Boolean,
    stayStill: Boolean,
    back: Boolean,
    needLogin: Boolean,
    navLeft: Boolean,
    navLeftPaddingLeft: {
      type: Number,
      default: 42,
    },
    hideSafeArea: Boolean,
    extraNavHeight: {
      type: Number,
      default: 0,
    },
    contentWrapColor: {
      type: String,
      default: "",
    },
  },
  watch: {
    showTop: {
      handler(val) {
        let flag = val || this.stayStill;
        this.background = flag ? this.bgColor : this.initBgColor;
      },
      immediate: true,
    },
    // bgColor: {
    //   handler(val) {
    //     this.background = val;
    //   },
    //   immediate: true,
    // },
  },
  data() {
    return {
      activeColor: this.$primaryColor,
      inactiveColor: "#555555",
      customStyle: {
        backgroundColor: "#E9ECEF",
        border: "none",
        color: "#555555",
      },
      topHeight: getApp().globalData.topHeight,
      height: getApp().globalData.navHeight + this.extraNavHeight,
      background: "transparent",
      activeTab: getApp().globalData.activeTab,
      tabBarList: getApp().globalData.tabBarList,
      pagesLen: 0,
      // personId: uni.getStorageSync("person-id").slice(2) || undefined,
      theme: this.$theme,
      isLogin: false,
      isCompany: false,
      showRights: false,
      companyId: uni.getStorageSync("company-id"),
      defaultImg: this.$imgBaseSelf + "common/need-login.png",
      isSinglePage: false,
    };
  },
  computed: {
    personId() {
      return uni.getStorageSync("person-id").slice(2) || undefined;
    },
    color() {
      return this.dark ? this.darkTxtColor : this.txtcolor;
    },
  },
  created() {
    this.pagesLen = getCurrentPages().length;

    // this.handleLogin();
    // let companyState = getApp().globalData.companyState;
    // if(this.isCompany && companyState == '1') {
    //   this.checkIsShowRights();
    // }
  },
  mounted() {
    this.personId || !this.needLogin ? "" : this.handleLogin();
    let enterOptions = uni.getEnterOptionsSync();
    if (enterOptions.scene == 1154) {
      this.isSinglePage = true;
    }
    // 已登录且进入企业端
    let fromLoginStatus = uni.getStorageSync("fromLoginStatus");
    if (this.personId && fromLoginStatus == "company") {
      uni.removeStorageSync("fromLoginStatus");
      uni.setStorageSync("login-status", "company");
      getApp().globalData.loginStatus = "company";
      getApp().globalData.tabBarList = getApp().globalData.companyTabs;
      this.tabBarList = getApp().globalData.tabBarList;
    }
    this.isCompany = uni.getStorageSync("login-status") == "company";

    let route = getCurrentPages()[0].route;
    let routeItem = this.tabBarList.find(
      (ele) => ele.pagePath.indexOf(route) >= 0
    );
    this.activeTab = routeItem ? routeItem.name : getApp().globalData.activeTab;
  },
  methods: {
    async handleLogin(e) {
      let route = getCurrentPages()[0].route;
      if (
        route == "pagesSub/public/loginMode/index" ||
        route == "pagesSub/public/login/index"
      ) {
        return;
      }

      let fullPath =
        getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
      let needReturnList = [
        "pagesSub/newResume",
        "pages/message/index",
        "pages/report/index",
        "pagesSub/career/careerInfo/publicationDetail",
        "pages/activity/zhaduiActivity",
        "pagesSub/companyCenter/vip/index",
        "pagesSub/public/loginPc/index",
        "pagesSub/index/graduateJob/index", // 临时使用
      ]; // 指定页面登录后返回
      let returnUrl = "";
      let fromLoginStatus = uni.getStorageSync("fromLoginStatus"); // 通过分享链接进来
      if (fromLoginStatus) {
        returnUrl = encodeURIComponent(fullPath);
      } else {
        for (let i = 0; i < needReturnList.length; i++) {
          if (fullPath.indexOf(needReturnList[i]) >= 0) {
            returnUrl = encodeURIComponent(fullPath);
            break;
          }
        }
      }

      this.tabBarList.forEach((ele) => {
        if (ele.pagePath == fullPath) getApp().globalData.activeTab = ele.name;
      });

      let fcn;
      // #ifdef H5
      fcn = uni.navigateTo;
      var path = "/pagesSub/public/login/index";
      await this.checkLogin();
      // #endif
      // #ifdef MP-WEIXIN
      fcn = uni.reLaunch;
      var path = "";
      if (this.previewId.mpaActivityId) {
        path = `/pagesSub/public/loginMode/index?mpaActivityId=${this.previewId.mpaActivityId}&sharePersonId=${this.previewId.sharePersonId}`;
      } else if (this.previewId.activityIdCode) {
        path = `/pagesSub/companyCenter/case/detail?id=${this.previewId.mpaActivityId}&sharePersonId=${this.previewId.sharePersonId}`;
      } else {
        path = "/pagesSub/public/loginMode/index?returnUrl=" + returnUrl;
      }
      // console.log(path)

      this.isLogin = !!this.personId;
      // #endif
      console.log(
        "this.needLogin && !this.isLogin",
        this.needLogin,
        this.isLogin,
        this.needLogin && !this.isLogin
      );

      if (!this.isLogin) {
        fcn({ url: path });
      }
    },
    checkLogin() {
      return new Promise((resolve, reject) => {
        resolve();
      }).then((res) => {
        this.isLogin = !!this.personId;
      });
    },
    handleBack() {
      uni.navigateBack();
    },
    handleHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    handleTabBar(item) {
      getApp().globalData.activeTab = item.name;
      // uni.reLaunch({ url: item.pagePath });
      uni.removeStorageSync("fromLoginStatus");
      if (this.isCompany) {
        if (item.switchTab) {
          uni.switchTab({ url: item.pagePath });
        } else {
          uni.reLaunch({ url: item.pagePath });
        }
      } else {
        this.$bus.$emit("updataMessageSidebarCnt");
        uni.switchTab({
          url: item.pagePath,
        });
      }
    },
    checkIsShowRights() {
      let rights = uni.getStorageSync("showRights");
      if (typeof rights != "object") {
        rights = {};
      }
      if (rights[this.companyId] == "1") {
        this.showRights = false;
      } else {
        const params = {
          personId: this.personId,
          companyId: this.companyId,
          rightsType: "public",
        };
        getCompanyPersonAllRights(params).then((res) => {
          if (res && res.data && res.data.length) {
            this.showRights = true;
            rights[this.companyId] = "1";
            uni.setStorageSync("showRights", rights);
          }
        });
      }
    },
    toRights() {
      uni.navigateTo({
        url: "/pagesSub/companyCenter/rights/index",
      });
    },
  },
};
</script>
<style lang="scss">
.page-wrap {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  .nav-wrap {
    flex-shrink: 0;
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 32rpx;
      z-index: 9999;
      .nav-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        &.left {
          justify-content: flex-start;
        }
        .nav-back {
          position: absolute;
          left: 0;
          top: 50%;
          padding: 28rpx;
          width: 44rpx;
          height: 44rpx;
          background: url($img-base + "back.png") no-repeat center center;
          background-size: 44rpx 44rpx;
          transform: translateY(-50%);
          box-sizing: content-box;
          &.dark {
            background-image: url($img-base + "back-b.png");
          }
        }
        .nav-home {
          position: absolute;
          left: 0;
          top: 50%;
          padding: 28rpx;
          width: 44rpx;
          height: 44rpx;
          background: url($img-base + "home.png") no-repeat center center;
          background-size: 44rpx 44rpx;
          transform: translateY(-50%);
          box-sizing: content-box;
          &.dark {
            background-image: url($img-base + "home-b.png");
          }
        }
        .nav-title {
          max-width: 360rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .content-wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    &.hide-pd {
      padding-bottom: 0;
    }
    .no-login {
      position: absolute;
      left: 50%;
      top: 48%;
      width: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: $uni-text-color-888;
      font-size: $uni-font-size-nor;
      .no-login-text {
        margin-top: 24rpx;
        color: $uni-text-color-555;
        font-size: $uni-font-size-lg;
      }
      .no-login-btn {
        margin-top: 8rpx;
        u-button {
          display: block;
          margin-top: 24rpx;
        }
      }
    }
  }
  .tab-wrap {
    flex-shrink: 0;
    .tab-bar {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      width: 100%;
      border-radius: 2rpx 2rpx 0 0;
      box-shadow: 0 0 24rpx $shadow-color;
      background: $uni-bg-color;
      z-index: 9999;
      .tab-bar-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 25%;
        height: 110rpx;
        font-size: 18rpx;
        color: #777777;
        &.active {
          color: $u-type-primary;
        }
        &.company {
          width: 33%;
        }
        .item-icon {
          margin-bottom: 1px;
          width: 54rpx;
          height: 54rpx;
        }
      }
    }
    .tab-replace {
      height: 110rpx;
    }
  }

  .rights-box {
    width: 554rpx;
    height: 950rpx;
    background: url($img-base + "rights/rights_bg.png") no-repeat center center;
    background-size: 100%;

    .btn-rights {
      position: absolute;
      bottom: 106rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 252rpx;
      height: 98rpx;
      background: url($img-base + "rights/rights_btn.png") no-repeat center
        center;
      background-size: 100% 100%;
    }

    .icon-close {
      position: absolute;
      bottom: 0rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 44rpx;
      height: 44rpx;
      background: url($img-base + "common/close-circle.png") no-repeat center
        center;
      background-size: 100% 100%;
    }
  }
}
</style>
